#root {
    -fx-background-color: #333333;
    -fx-padding: 1px;
}
#mainToolBar {
    -fx-padding: 10px;
    -fx-background-image: url("images/top-bar.png"),
                          url("images/clef.png");
    -fx-background-size: cover, contain;
    -fx-background-position: left top, center center;
    -fx-background-repeat: no-repeat;
}
#window-resize-button {
    -fx-background-image: url("images/window-corner.png");
    -fx-background-position: right 1px bottom 1px;
    -fx-background-repeat: no-repeat;
}
#window-close {
    -fx-font-size: 1px;
    -fx-background-color: null;
    -fx-background-image: url("images/window-close.png");
    -fx-padding: 6 6 4 6;
}
#window-min {
    -fx-font-size: 1px;
    -fx-background-color: null;
    -fx-background-image: url("images/window-min.png");
    -fx-padding: 6 6 4 6;
}
#window-max {
    -fx-font-size: 1px;
    -fx-background-color: null;
    -fx-background-image: url("images/window-expand.png");
    -fx-padding: 6 6 4 6;
}
#window-close:hover {
    -fx-background-image: url("images/window-close-over.png");
}
#window-min:hover {
    -fx-background-image: url("images/window-min-over.png");
}
#window-max:hover {
    -fx-background-image: url("images/window-expand-over.png");
}
#page-area {
    -fx-padding: 0;
}
#page-splitpane {
    -fx-background-color: null;
    -fx-background-insets: 0;
    -fx-padding: 0;
}
#page-splitpane *.split-pane-divider{
    -fx-padding: 0 1 0 0;
    -fx-background-color: transparent, #333333;
    -fx-background-insets: 0 -3 0 -3, 0;
    -fx-border-color: null;
}
#page-splitpane *.horizontal-grabber {
    -fx-padding: 0;
    -fx-shape: "";
}
#page-toolbar {
    /* Workaround for RT-14248 */
    -fx-border-image-source: url("images/mid-bar-right.png");
    -fx-border-image-slice: 0 0 0 0 fill;
    -fx-border-image-width: 0 0 0 0;
    -fx-border-image-repeat: stretch;
  /*  -fx-background-image: url("images/mid-bar-right.png");
    -fx-background-size: 100% 100%; */
    -fx-padding: 0px 0px 1px 0px;
    -fx-spacing: 0;
}
#page-toolbar .button {
    -fx-background-color: null;
    -fx-background-radius: 0;
    -fx-background-insets: 0;
    -fx-padding: 5px 8px 6px 8px;
    -fx-border-color: transparent #6e737d transparent rgba(255,255,255,0.3) , transparent rgba(255,255,255,0.3) transparent transparent;
    -fx-border-insets: 0, 1;
}
#page-toolbar .button:hover {
    -fx-background-color: rgba(255,255,255,0.4);
}
#page-toolbar .breadcrumb-bar .button {
    -fx-padding: 7px;
    -fx-border-color: null;
    -fx-border-insets: 0;
    -fx-border-image-source: url("images/crumb.png");
    -fx-border-image-slice: 1 10 1 10 fill;
    -fx-border-image-width: 1 10 1 10;
    -fx-border-image-repeat: stretch;
}
#page-toolbar .breadcrumb-bar .button:hover {
    -fx-background-color: null;
    -fx-border-image-source: url("images/crumb-hover.png");
}
#page-toolbar .breadcrumb-bar .only-button {
    -fx-border-image-width: 0 0 0 0;
    -fx-border-image-repeat: stretch;
    -fx-border-image-source: url("images/crumb-selected.png");
    -fx-border-color: transparent #6e737d transparent rgba(255,255,255,0.3) , transparent rgba(255,255,255,0.3) transparent transparent;
    -fx-border-insets: 0 0 1 0, 1;
}
#page-toolbar .breadcrumb-bar .only-button:hover {
    -fx-border-image-source: url("images/crumb-selected.png");
    -fx-border-image-insets: 0 0 1 0;
}
#page-toolbar .breadcrumb-bar .first-button {
    -fx-border-image-insets: 0 -5 1 0;
    -fx-border-image-width: 0 10 0 0;
    -fx-border-image-repeat: stretch;
}
#page-toolbar .breadcrumb-bar .middle-button {
    -fx-border-image-insets: 0 -5 1 -4;
}
#page-toolbar .breadcrumb-bar .last-button {
    -fx-border-image-insets: 0 0 0 -4;
    -fx-border-image-width: 0 0 0 10;
    -fx-border-image-repeat: stretch;
    -fx-border-image-source: url("images/crumb-selected.png");
    -fx-border-color: transparent #6e737d transparent transparent , transparent rgba(255,255,255,0.2) transparent transparent;
    -fx-border-insets: 0 0 1 0, 1;
}
#page-toolbar .breadcrumb-bar .last-button:hover {
    -fx-border-image-source: url("images/crumb-selected.png");
}
#page-tree-toolbar {
    -fx-padding: 4px;
    /* Workaround for RT-14248 */
    -fx-border-image-source: url("images/mid-bar-left.png");
    -fx-border-image-slice: 0 0 0 0 fill;
    -fx-border-image-width: 0 0 0 0;
    -fx-border-image-repeat: stretch;
    /*-fx-background-image: url("images/mid-bar-left.png");
    -fx-background-size: 100% 100%; */
}
#page-tree-toolbar .toggle-button Text {
    -fx-effect: dropshadow( three-pass-box , rgba(255,255,255,0.6) , 0, 0.0 , 0 , 1 );
    -fx-font: 12px "AmbleCn";
}
#page-tree-toolbar .toggle-button:selected Text {
    -fx-effect: dropshadow( three-pass-box , black , 3, 0.5 , 0 , 0 );
}
#page-tree-toolbar .toggle-button {
    -fx-padding: 3 10 3 10;
    -fx-background-color: null;
    -fx-background-radius: 10,9,8,6;
    -fx-background-insets: 0;
}
#page-tree-toolbar .toggle-button:focused {
    -fx-background-color: null;
}
#page-tree-toolbar .toggle-button:selected {
    -fx-text-fill: -fx-light-text-color;
    -fx-background-color:
        #CCCCCC,
        linear (0%,0%) to (0%,100%) stops (0%, derive(-fx-color,-90%)) (100%, derive(-fx-color,-60%)),
        linear (0%,0%) to (0%,100%) stops (0%, derive(-fx-color,-60%)) (50%, derive(-fx-color,-35%)) (98%, derive(-fx-color,-30%)) (100%, derive(-fx-color,-50%)),
        linear (0%,0%) to (100%,0%) stops (0%, rgba(0,0,0,0.3)) (10%, rgba(0,0,0,0)) (90%, rgba(0,0,0,0)) (100%, rgba(0,0,0,0.3));
    -fx-background-insets: 0 0 -1 0, 0, 1, 1;
}
#page-tree .tree-cell {
    -fx-indent: 10;
    -fx-background-color: transparent;
}
#page-tree .tree-cell:odd {
    -fx-background-color: transparent;
}
#page-tree .tree-cell:filled:selected:focused, #page-tree .tree-cell:filled:selected {
    -fx-background: -fx-accent;
    -fx-background-color: -fx-selection-bar;
    -fx-text-fill: -fx-selection-bar-text;
}
#page-tree {
    -fx-background-color: #d1dee3;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
    -fx-padding: 0;
    -fx-effect: innershadow( one-pass-box , rgba(0,0,0,0.2) , 30, 0.0 , 0 , 0 );
}
#page-tree:focused {
    -fx-background-color: #d1dee3;
    -fx-background-insets: 0;
    -fx-background-radius: 0;
}
/* Window Button Styles */
.window-button {
    -fx-skin: "com.sun.javafx.scene.control.skin.ButtonSkin";
    -fx-background-color: #616161, #464646, #505050;
    -fx-background-insets: 0,1,2;
    -fx-background-radius: 6,5,4;
    -fx-padding: 0 0 0 0;
    /* workaround for button sizing */
    -fx-font: 1px "Amble Cn";
}
.window-button:focused {
    -fx-background-color: -fx-accent, #464646, #505050;
    -fx-background-insets: -0.4,1,2;
    -fx-background-radius: 6.4,5,4;
}
.window-button:hover {
    -fx-background-color: #616161, white, -fx-accent;
}
.window-button:pressed {
    -fx-background-color: #616161, white, #303030;
}
.window-button Rectangle {
    -fx-fill: #949494;
}
.window-button:hover Rectangle {
    -fx-fill: white;
}
/* Page Styles */
.page-header {
    -fx-font: bold 36px "Amble Cn";
    -fx-padding: 8px 0 10px 0;
    -fx-border-color: transparent transparent #AAAAAA transparent;
    -fx-border-insets: 0 0 8px 0;
    -fx-text-fill: #0072aa;
  /*  -fx-effect: dropshadow( three-pass-box , white , 0, 0.0 , 10 , 1 ); */
}
.page-subheader {
    -fx-font: bold 18px "Amble Cn";
    -fx-padding: 8px 0 10px 0;
    -fx-border-color: transparent transparent #AAAAAA transparent;
    -fx-border-insets: 0 0 8px 0;
    -fx-text-fill: #0072aa;
  /*  -fx-effect: dropshadow( three-pass-box , white , 0, 0.0 , 10 , 1 ); */
}
/* Category Page Styles */
.category-page {
    -fx-background-image: url("images/texture.png");
    -fx-background-repeat: repeat repeat;
    -fx-background-position: left top;
    -fx-padding: 8px;
}
.category-page .page-header {
    -fx-font: bold 36px "Amble";
    -fx-padding: 8px 0 10px 0;
    -fx-text-fill: #c1c8cc;
    -fx-effect: dropshadow( three-pass-box , black , 0, 0.0 , 0 , 1 );
    -fx-border-color: null;
}
.category-header {
    -fx-font: bold 18px "Amble Cn";
    -fx-padding: 8px 0 10px 0;
    -fx-text-fill: #c1c8cc;
    -fx-background-color: rgba(255,255,255,0.12);
    -fx-background-insets: 4 -8 4 -8;
    -fx-border-color: null;
}
.category-header Text{
    -fx-effect: dropshadow( three-pass-box , black , 0, 0.0 , 0 , 1 );
}
.category-page-flow {
    -fx-padding: 3px 0 8px 0;
}
.sample-tile {
    -fx-skin: "com.sun.javafx.scene.control.skin.ButtonSkin";
    -fx-font: 12px "Amble Cn";
    -fx-text-fill: white;
    -fx-graphic-hpos: center;
    -fx-graphic-vpos: top;
    -fx-alignment: center;
    -fx-padding: 4px 4px 3px 4px;
}
.sample-tile:hover {
 /*   -fx-border-color: derive(-fx-accent,80%), -fx-accent, derive(-fx-accent,80%);
    -fx-border-insets: -1,0,1;
    -fx-border-radius: 7,6,5; */
    -fx-effect: dropshadow( three-pass-box , -fx-accent , 8 , 0.0 , 0 , 0 );
}
/* Sample Page Styles */
.sample-page {
    -fx-background-color: #EEEEEE;
    -fx-text-fill: black;
    -fx-padding: 0 0 0 8px;
}
.code-pane {
    -fx-padding: 1px;
}
.sample-control-grid .slider .thumb { -fx-padding: 9px; } /* Make control grid slider thumbs bigger */
.sample-control-grid .slider:focused .thumb { -fx-padding: 9px; } /* Make control grid slider thumbs bigger */
.sample-control-grid-prop-label {
    -fx-font: 16px "Amble Lt";
}
#source-tabs {
    /** without this all tabs (except the first one) don't draw the left-hand
        edge of their borders, as the caspian.css style is -1px. */
    -fx-tab-spacing: 0px;
}
#source-tabs *.tab-header-background {
    -fx-background-color: #51555c;
    /* -fx-background-color: #606060, lightgray, derive(-fx-color, -20%); */
    -fx-effect: innershadow(two-pass-box , rgba(0,0,0,0.7) , 12, 0.0 , 0 , 0);
}
#source-tabs .tab-header-content-spacer {
    -fx-padding: 0;
    -fx-border-width: 0px;
}
#source-tabs .tab {
    -fx-padding: 2 8 2 8;
    -fx-background-radius: 8 8 0 0, 7 7 0 0, 6 6 0 0;
}
#source-tabs .tab-label {
    -fx-font: 14px "Amble";
}
#source-tabs .tab:selected {
    -fx-padding: 2 8 2 8;
    -fx-background-radius: 8 8 0 0, 7 7 0 0, 6 6 0 0;
    -fx-background-color: #EEEEEE;
}
#source-tabs .tab-close-button {
    -fx-shape: null;
}
/* Right Side Bar Styles */
.right-sidebar {
    -fx-background-color: linear (0%,0%) to (0%,100%) stops (0%,#353E4A) (100%,#18212B);
    -fx-padding: 10;
}
.right-sidebar-title {
    -fx-font: 18px "Amble Lt";
    -fx-text-fill: white;
    -fx-padding: 5 0 0 0;
}
.right-sidebar-body {
    -fx-font: 12px "Amble";
    -fx-text-fill: #b7babe;
    -fx-fill: #b7babe;
    -fx-padding: 0 0 5px 0;
}
.right-sidebar .separator .line {
    -fx-background-color: #212930, #3f4856;
    -fx-padding: 6 0 0 0;
    -fx-background-insets: 4 -10 0 -10,5 -10 0 -10;
    -fx-border-style: none;
    -fx-border-color: null;
}
.right-sidebar .hyperlink {
    -fx-font: 10px "Amble Cn";
    -fx-text-fill: #b7babe;
}
.right-sidebar .hyperlink:hover {
    -fx-text-fill: -fx-accent;
}
/* Remove all scrollpane borders */
.noborder-scroll-pane {
    -fx-padding: 0;
    -fx-background-color: null;
    -fx-background-insets: 0;
}
/* move buttom arrow up to make room for window rewsize button */
.noborder-scroll-pane > * > .scroll-bar:vertical {
    -fx-padding: -1.0 -1.0 12 0.0;
}
.web-view-window-corner .scroll-bar:vertical {
    -fx-padding: 0 0 12 0;
}